
import React,{ Component } from 'react'

import actionCreator from '../../../store/lisa/actionCreator'
import { connect } from 'react-redux'

import { bindActionCreators } from 'redux'

// UI 组件
class Control extends Component {
   
    render () { 
        return (
            <div>
                <button> - </button>
                &nbsp;&nbsp;
                <button onClick={this.props.increment}> + </button>
            </div>
        )
    }
}
//这个函数会接收到store.dispatch
//返回出去的对象上的方法会放入到ui组件的属性上
// let mapDispatchProps = (dispatch)=>{
//     return {
//         increment(){
//             // console.log("lll")
//             dispatch(actionCreator.increment())
//         }
//     }
// }
// export default connect(state=>state,mapDispatchProps)(Control)

let mapDispatchToProps = dispatch => {
	//bindActionCreators 可以直接将actionCreator的方法做出处理，返回的对象的方法里就会自动的去dispatch掉这些创建好的action了
	//bindActionCreators会返回一个对象，这个对象里的方法其实就是actionCreator里的方法处理之后的结果，处理的情况：将原方法中创建的action直接dispatch走
	return {
        ...bindActionCreators(actionCreator, dispatch)
    }
}

export default connect(state=>state,mapDispatchToProps)(Control)

// export default connect(state=>state,dispatch=>{
//     return bindActionCreators(actionCreator,dispatch)
// })(Control)


// 现在要让组件去调用store.dispatch，也就是说让组件得到store.dispatch的方法，这也属性在使用store的东西，这个时候也要生成一个容器组件

// 传入mapDispatchToProps方法可以将一些方法传入到UI组件的属性上，而这些方法都能调用到dispatch，将actionCreator创建好的action传入到dispatch里就可以了

// 可以利用bindActionCreators将actionCreator的方法处理一下产生新方法，在新方法里已经自动的将原方法里产生action给dispatch了